<template>
	<view class="uni-container">
		<view name="content">
			<input placeholder="请输入标题" @input="check"
				class="uni-input-border mt30" v-model="formData.title" trim="right" ></input>
				<view class="tips">{{word}}/40</view>
		</view>
		<view name="content mt30">
			<textarea placeholder="请输入要分享的内容" @input="binddata('content', $event.detail.value)"
				class="uni-textarea-border mt30"  v-model="formData.content" trim="right"></textarea>
		</view>
		<view name="imgs" class="mt30 flex" style="justify-content: start;">
			<image v-for="(item,index) in imgArr" :src="item" style="width: 140rpx;height: 140rpx;margin-left: 30rpx;"
				mode="aspectFill"></image>
			<view class="iconfont" @click="uploadImg" style="font-size: 140rpx;color: #f0f0f0;margin-left: 30rpx;">
				&#xe60f;</view>
		</view>

		<view class="uni-button-group">
			<button type="primary" class="uni-button " style="background-color: #007AFF;" @click="submit">发布</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr: [],
				word:"0",
				disabled:false,
				formData: {
					"content": "",
					"title": ""
				},
				formOptions: {},

			}
		},

		methods: {
			uploadImg() {
				let that = this
				uni.chooseImage({
					success(res) {
						console.log(res.tempFilePaths)
						that.imgArr = res.tempFilePaths;
						console.log(that.imgArr)
					}
				})
			},
			// 查看输入的字符串长度
			check(){
				// console.log(this.formData.title)
				this.word = this.formData.title.length
				if(this.word >= 40){
					// this.disabled = true
					this.formData.title.slice(0,39)
					uni.showToast({
						title:'超过最大限制',
						icon:"none",
						duration:1500
					})
				}else{
					// this.disabled = false
				}
			},
			/**
			 * 触发表单提交
			 */
			submit() {
				uni.showLoading({
					mask: true
				})
				this.$refs.form.submit().then((res) => {}).catch((errors) => {
					uni.hideLoading()
				})
			},

			submitForm(value) {

			}
		}
	}
</script>

<style scoped lang="less">
	.uni-container {
		padding: 15px;
	}

	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.uni-input-border {
		padding: 0 30px;
		height: 35px;
	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
		width: 100%;
	}

	.uni-button-group {
		margin-top: 50px;
		display: flex;
		justify-content: center;
		flex-direction: row;
	}

	.uni-button {
		width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}

	.uni-container /deep/ .uni-file-picker__container {
		flex-direction: row;
	}
	.tips{
		width: 100%;
		text-align: right;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}
</style>
